<template>
	<view class="charts-box">
		<qiun-data-charts :opts="opts" type="line" :chartData="chartData"></qiun-data-charts>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				opts: {
					extra: {
						line: {
							type: "curve",
							width: 4
						}
					}
				},
				chartData: {

				}
			}
		},
		onReady() {
			// 请求统计数据
			this.getData();
		},
		methods: {
			async getData() {
				const res = await request('/api/CropGrowthTrend');
				if (res.statusCode !== 200) {
					return false;
				}
				// 计算类目数据
				const categories = res.data[0].content.map(item => item.month);
				// 计算统计数据
				const series = res.data.map(item => {
					const data = item.content.map(item => item.area);
					return {
						name: item.city,
						data
					}
				});
				this.chartData = {
					categories,
					series
				}
			}
		}
	}
</script>

<style>
	.charts-box {
		margin-top: 60rpx;
		width: 100%;
		height: 300px;
	}
</style>